<script setup>
import Box from '../components/Box.vue'
import ConsolePop from '@/components/ConsolePop.vue';
import Animate from '@/components/Animate.vue';
import {onMounted, ref} from 'vue'

import start1 from '@/assets/images/start1.png'
import start2 from '@/assets/images/start2.png'
import start3 from '@/assets/images/start3.png'
import start4 from '@/assets/images/start4.png'
import start5 from '@/assets/images/start5.png'
import start11 from '@/assets/images/start11.png'
import start12 from '@/assets/images/start12.png'
import start21 from '@/assets/images/start21.png'
import start22 from '@/assets/images/start22.png'
import start31 from '@/assets/images/start31.png'
import start32 from '@/assets/images/start32.png'
import start41 from '@/assets/images/start41.png'
import start42 from '@/assets/images/start42.png'
import start51 from '@/assets/images/start51.png'
import start52 from '@/assets/images/start52.png'
import ani1 from '@/assets/images/1@0.5x.png' 
import ani2 from '@/assets/images/2@0.5x.png' 
import ani3 from '@/assets/images/3@0.5x.png' 
import ani4 from '@/assets/images/4@0.5x.png' 
import ani5 from '@/assets/images/5@0.5x.png' 
const show = ref(null)
const imagesArr = [
  start1,
  start2,
  start3,
  start4,
  start5,
  start11,
  start12,
  start21,
  start22,
  start31,
  start32,
  start41,
  start42,
  start51,
  start52,
  ani1,
  ani2,
  ani3,
  ani4,
  ani5,
]

const imgLazyLoad = ()=>{
  // console.log('开始加载图片===============')
  // const imgList = document.querySelectorAll('.indexContainer img') 
  let imgNum = 0
  imagesArr.forEach(item=>{
    const img = new Image()
    img.src = item
    img.onload = ()=>{
      imgNum++
      if(imagesArr.length === imgNum){
        // console.log('加载完成======================');
        show.value = true
      }
    }
  })
}
imgLazyLoad()


const step = ref(0)
onMounted(()=>{
    setInterval(()=>{
        step.value = 2
    },1000)
})
</script>
<template>
    <Box :designWidth="1920" :designHeight="1080" v-if="show">
      <div class="indexContainer">
        <ConsolePop></ConsolePop>
      </div>
    </Box>
</template>

<style>
body{
  background: #061626;
}
*{
    margin: 0;
    padding: 0;
}
@font-face {
  font-family: 'DINPro';
  src: url('../assets/fonts/DINPro-Regular.otf') format('opentype'),
       url('../assets/fonts/DINPro-Medium.ttf') format('truetype'),
       url('../assets/fonts/DINPro-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.indexContainer{
  width: 1920px;
  height: 1080px;
  margin: 0 auto;
  background: url('../assets/img/indexBg.jpg') no-repeat center center;
  background-size: 100%;
  position: relative;
  font-family:PingFang SC,PingFangSC-Regular, Microsoft Yahei , Arial, Helvetica;
}
</style>
  